import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import mockData from './data.json';
import echarts from 'echarts';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>这是第一个作为元素</span></span></h1>
//echart插件的使用
console.log(mockData)

class EchartsCom extends Component{
  constructor(props){
    super(props);
  };
  componentDidMount(){
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));
    //  构造数据t
    let dataList =[];
    for(let i=0;i<mockData.length;i++){
      console.log('9999')
      let obj ={};
      obj['name'] = mockData[i].province;
      obj['value']= mockData[i].diagnosis;
      dataList.push(obj);
    }
    console.log('构造出来的图表数据是：',dataList)

     // 指定图表的配置项和数据
     var option = {
      title: {
        text: echarts.format.addCommas(dataList) + ' Data',
        left: 10
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: false
            },
            saveAsImage: {
                pixelRatio: 2
            }
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        bottom: 90
    },
    dataZoom: [{
        type: 'inside'
    }, {
        type: 'slider'
    }],
    xAxis: {
        data: dataList.value,
        silent: false,
        splitLine: {
            show: false
        },
        splitArea: {
            show: false
        }
    },
    yAxis: {
        splitArea: {
            show: false
        }
    },
         series: [{
             name: '销量',
             type: 'bar',
             data:dataList,
             large: true
         }]
     };

     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
  }
  render(){
    return (
      <div className='echartsWrap'>
        <h4>这是echarts插件使用案例</h4>
        {/*ECharts 准备一个具备大小（宽高）的 DOM*/ }
        <div id="main" style={{width: '600px',height:'400px'}}></div>
      </div>
    )
  }
}



ReactDOM.render(
  <EchartsCom/>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
